<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jasny组件</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico">
	<link rel="stylesheet" href="../../plugin/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="../../plugin/font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="../../plugin/Ionicons/css/ionicons.min.css">
	<link rel="stylesheet" href="../../adminlte/css/AdminLTE.min.css">
	<link rel="stylesheet" href="../../adminlte/css/skins/all-skins.min.css">
	<link rel="stylesheet" href="../../plugin/jasny/jasny-bootstrap.min.css">
	<link rel="stylesheet" href="../../system/css/common.css">
</head>
<body class="hold-transition sidebar-mini gray-bg">
	<div class="wrapper">
		<section class="content">
			<div class="row">
				<div class="col-sm-6">
					<div class="box">
						<div class="box-header with-border">
							<h3 class="box-title">文件上传控件 <small>https://github.com/jasny/bootstrap</small></h3>
							<div class="box-tools pull-right">
							  <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
							  </button>
							  <div class="btn-group">
								<button type="button" class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown">
								  <i class="fa fa-wrench"></i></button>
								<ul class="dropdown-menu" role="menu">
								  <li><a href="#">Action</a></li>
								  <li><a href="#">Another action</a></li>
								  <li><a href="#">Something else here</a></li>
								  <li class="divider"></li>
								  <li><a href="#">Separated link</a></li>
								</ul>
							  </div>
							  <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
							</div>
						</div>
						<div class="box-body">
							<div class="form-group">
								<label class="font-noraml">输入组示例</label>
								<div class="fileinput fileinput-new input-group" data-provides="fileinput">
									<div class="form-control" data-trigger="fileinput"><i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename"></span></div>
									<span class="input-group-addon btn btn-default btn-file"><span class="fileinput-new">选择文件</span><span class="fileinput-exists">更改</span><input type="file"></span>
									<a href="#" class="input-group-addon btn btn-default fileinput-exists" data-dismiss="fileinput">清除</a>
								</div>
							</div>
							<div class="form-group">
								<label class="font-noraml">按钮示例</label>
								<br/>
								<div class="fileinput fileinput-new" data-provides="fileinput">
									<span class="btn btn-default btn-file"><span class="fileinput-new">选择文件</span><span class="fileinput-exists">更改</span><input type="file" name="..."></span>
									<span class="fileinput-filename"></span>
									<a href="#" class="close fileinput-exists" data-dismiss="fileinput" style="float: none">&times;</a>
								</div>
							</div>
							<div class="form-group">
								<label class="font-noraml">图片上传示例</label>
								<br/>
								<div class="fileinput fileinput-new" data-provides="fileinput">
									<div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div>
									<div>
										<span class="btn btn-default btn-file"><span class="fileinput-new">选择图片</span><span class="fileinput-exists">更改</span><input type="file"></span>
										<a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">清除</a>
									</div>
								</div>
							</div>
							<div class="form-group">
								<label class="font-noraml">图片预览示例</label>
								<br/>
								<div class="fileinput fileinput-new" data-provides="fileinput">
									<div class="fileinput-new thumbnail" style="width: 140px; height: 140px;">
									  <img src="https://api.yike-cloud.com/static/mealimg/1616640217713.png">
									</div>
									<div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>
									<div>
									  <span class="btn btn-default btn-file"><span class="fileinput-new">选择图片</span><span class="fileinput-exists">更改</span><input type="file"></span>
									  <a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">清除</a>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-sm-6">
					<div class="box">
						<div class="box-header with-border">
							<h3 class="box-title">固定格式文本 <small>https://github.com/jasny/bootstrap</small></h3>
							<div class="box-tools pull-right">
							  <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
							  </button>
							  <div class="btn-group">
								<button type="button" class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown">
								  <i class="fa fa-wrench"></i></button>
								<ul class="dropdown-menu" role="menu">
								  <li><a href="#">Action</a></li>
								  <li><a href="#">Another action</a></li>
								  <li><a href="#">Something else here</a></li>
								  <li class="divider"></li>
								  <li><a href="#">Separated link</a></li>
								</ul>
							  </div>
							  <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
							</div>
						</div>
						<div class="box-body">
							<div class="form-group">
								<label class="font-noraml">手机号码格式</label>
								 <input type="text" class="form-control" data-mask="999-9999-9999" placeholder="请输入手机号码">
								 <span class="help-block">158-8888-88888</span>
							</div>
							<div class="form-group">
								<label class="font-noraml">电话号码格式</label>
								<input type="text" class="form-control" data-mask="9999-9999999" placeholder="请输入电话号码">
								<span class="help-block">0730-8888888</span>
							</div>
							<div class="form-group">
								<label class="font-noraml">日期格式</label>
								<input type="text" class="form-control" data-mask="9999-99-99" placeholder="请输入日期格式">
								<span class="help-block">yyyy-mm-dd</span>
							</div>
							<div class="form-group">
								<label class="font-noraml">IPV4格式</label>
								<input type="text" class="form-control" data-mask="999.999.999.999" placeholder="请输入IP地址">
								<span class="help-block">192.168.100.200</span>
							</div>
							<div class="form-group">
								<label class="font-noraml">税务代码格式</label>
								<input type="text" class="form-control" data-mask="99-9999999" placeholder="请输入税务代码">
								<span class="help-block">99-9999999</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>
    </div>
    <script src="../../plugin/jquery/jquery.min.js"></script>
    <script src="../../plugin/bootstrap/js/bootstrap.min.js"></script>
    <script src="../../adminlte/js/adminlte.min.js"></script>
	<script src="../../plugin/jasny/jasny-bootstrap.min.js"></script>
</body>
</html>
